<template>
	<view>
		<tui-input v-model="model" :label="label" :placeholder="placeholder" :labelColor="labelColor" :lineLeft="false"
			required disabled @click="show">
			<template slot="right">
				<text class="cuIcon-right text-gray text-xl"></text>
			</template>
		</tui-input>
		<tui-datetime ref="picker" :setDateTime="model || ''" :type="type" @confirm="valueChange"></tui-datetime>
	</view>
</template>

<script>
	export default {
		model: {
			event: "change",
			prop: "value"
		},
		props: {
			value: {
				type: String,
				default: null,
			},
			label: {
				type: String,
				default: '字段标题'
			},
			placeholder: {
				type: String,
				default: '请输入...',
			},
			labelColor: {
				type: String,
				default: '#888888'
			},
			type: {
				type: Number,
				default: 2
			}
		},
		data() {
			return {
				model: null, // 值
			};
		},
		mounted() {
			this.model = this.modelValue;
		},
		watch: {
			model(n, o) {
				this.modelValue = this.model;
			},
			modelValue(n, o) {
				this.model = this.modelValue;
			}
		},
		computed: {
			modelValue: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('change', val);
				},
			}
		},
		methods: {
			show() {
				this.$refs['picker'].show();
			},
			valueChange(e) {
				this.model = e.result || null;
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
